<template>
	<div class="wrapper">
		<div class="module-title">
			<img src="../../../assets/images/home08.png" alt="" />
			<span>常用工具/快捷入口</span>
		</div>
		<div class="module-content">
			<div class="tool-item" @click="openNewWindow('/HomeIndexData')">
				<img src="../../../assets/images/home10.png" alt="" class="photo" />
				<div class="name">产品进度</div>
			</div>
			<!-- <div class="tool-item" @click="openNewWindow('/scrollLargeScreen')">
				<img src="../../../assets/images/home10.png" alt="" class="photo" />
				<div class="name">产品进度</div>
			</div> -->
			<div class="tool-item" @click="openNewWindow('/dataBoard')">
				<img src="../../../assets/images/home11.png" alt="" class="photo" />
				<div class="name">数据看板</div>
			</div>
			<div class="tool-item" @click="openNewWindow('/BigPingBoard')">
				<img src="../../../assets/images/home11.png" alt="" class="photo" />
				<div class="name">数字化界面</div>
			</div>
			<div class="tool-item" @click="onToggle" v-if="!isFullscreen">
				<img src="../../../assets/images/home12.png" alt="" class="photo" />
				<div class="name">切全屏</div>
			</div>
			<div class="tool-item" @click="onToggle" v-if="isFullscreen">
				<img src="../../../assets/images/home12.png" alt="" class="photo" />
				<div class="name">退出全屏</div>
			</div>
		</div>
	</div>
</template>
<script>
import screenfull from "screenfull"

export default {
	data() {
		return {
			isFullscreen: false
		}
	},
	mounted() {
		this.init()
	},
	destroy() {
		if (screenfull.isEnabled) {
			screenfull.off("change", this.change)
		}
	},
	methods: {
		openNewWindow(path) {
			let routerUrl = this.$router.resolve({
				path: path
			})
			window.open(routerUrl.href, "_blank")
		},
		onToggle() {
			if (!screenfull.isEnabled) {
				this.$message({ message: "你的浏览器不支持全屏", type: "warning" })
				return false
			}
			screenfull.toggle()
		},
		change() {
			this.isFullscreen = screenfull.isFullscreen
		},
		init() {
			if (screenfull.isEnabled) {
				screenfull.on("change", this.change)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	width: 100%;
	height: calc(50% - 1rem);
	background-color: rgba(255, 255, 255, 0.8);
}

.module-title {
	height: 3.125rem;
	line-height: 3.125rem;
	font-size: 1.125rem;
	color: #3f949d;
	letter-spacing: 1px;
	background: url("../../../assets/images/home06.png") no-repeat;
	background-size: 100% 110%;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
}

.module-title img {
	margin: 0 1.625rem;
}

.module-content {
	height: calc(100% - 3.125rem);
	display: flex;
	flex-wrap: wrap;
	overflow-y: auto;
	.tool-item {
		width: 6.25rem;
		height: 7.875rem;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		overflow: hidden;
		cursor: pointer;
		margin: 0.625rem;
		border: 1px solid transparent;
		transition: all 0.3 linear;
		box-sizing: content-box;
		.photo {
			width: 5.625rem;
			height: 5.625rem;
			margin-bottom: 0.375rem;
		}
		.name {
			font-size: 1.125rem;
			color: #3f949d;
			letter-spacing: 0.5px;
			white-space: nowrap;
			height: 1.875rem;
			line-height: 1.875rem;
		}
	}
	.tool-item:hover {
		border: 1px solid #63b0b3;
		transform: scale(1.1);
		box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	}
}
</style>
